<template>
  <view class="user_desc_wrap">
    <!-- 上半部分 -->
    <view class="user_desc_top">
      <view class="top_item">
        <view class="item_number">1200</view>
        <view class="item_text">音符</view>
      </view>
      <view class="top_item">
        <view class="item_number">14</view>
        <view class="item_text">发布</view>
      </view>
      <view class="top_item">
        <view class="item_number">23</view>
        <view class="item_text">粉丝</view>
      </view>
      <view class="top_item">
        <view class="item_number">56</view>
        <view class="item_text">关注</view>
      </view>
    </view>

    <!-- 下半部分按钮 -->
    <view class="user_desc_bottom">
      <view class="left_big_btn">签到领取音符</view>
      <view class="right_sm_btn">
        <view class="sm_btn_item">微音商城</view>
        <view class="sm_btn_item">我的喜欢</view>
        <view class="sm_btn_item">音符明细</view>
        <view class="sm_btn_item">热门帖子</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {}
</script>

<style lang="scss" scoped>
.user_desc_wrap{
  padding: 20rpx;
  background: #fbe8ff;
  .user_desc_top{
    padding: 0 30rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    .top_item{
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      border-right: solid 2rpx rgba(0,0,0,.15);
      &:last-child{
        border-right: none;
      }
      .item_number{
        color: #000;
        font-size: 32rpx;
        letter-spacing: 2rpx;
      }
      .item_text{
        font-size: #666;
      }
    }
  }
  .user_desc_bottom{
    display: flex;
    align-items: center;
    padding: 30rpx;
    .left_big_btn{
      letter-spacing: 4rpx;
      font-weight: bold;
      padding: 20rpx;
      width: 210rpx;
      height: 210rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      background: linear-gradient(180deg,#C5A6F0,#EFA1DF);
      border-radius: 30rpx;
      font-size: 36rpx;
      color: #fff;
      text-align: center;
      box-shadow: 0rpx 0rpx 18rpx rgba(0,0,0,.2);
    }
    .right_sm_btn{
      flex: 1;
      display: flex;
      height: 210rpx;
      margin-left: 10rpx;
      justify-content: space-around;
      align-items: center;
      flex-wrap: wrap;
      .sm_btn_item{
        letter-spacing: 2rpx;
        width: 45%;
        height: 40%;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 30rpx;
        box-shadow: 0rpx 0rpx 18rpx rgba(0,0,0,.2);
        font-size: 28rpx;
        color: #666;
        font-weight: 200;
      }
    }
  }
}
</style>